<html>
<body>

<table cellpadding="10">
	<tr>
		<th>0</th>
		<td><table cellpadding="4" border="7"><tr><td>border="0"</td></tr></table></td>
		<td><table cellpadding="4" border="7"><tr><td>border="0px"</td></tr></table></td>
		<td><table cellpadding="4" border="7"><tr><td>border="0em"</td></tr></table></td>
	</tr>
	<tr>
		<th>1</th>
		<td><table cellpadding="4" border="0"><tr><td>border="1"</td></tr></table></td>
		<td><table cellpadding="4" border="0"><tr><td>border="1px"</td></tr></table></td>
		<td><table cellpadding="4" border="0"><tr><td>border="1em"</td></tr></table></td>
	</tr>
	<tr>
		<th>2</th>
		<td><table cellpadding="4" border="3em"><tr><td>border="2"</td></tr></table></td>
		<td><table cellpadding="4" border="3em"><tr><td>border="2px"</td></tr></table></td>
		<td><table cellpadding="4" border="3em"><tr><td>border="2em"</td></tr></table></td>
	</tr>
	<tr>
		<th>3</th>
		<td><table cellpadding="4" border="0em"><tr><td>border="3"</td></tr></table></td>
		<td><table cellpadding="4" border="0em"><tr><td>border="3px"</td></tr></table></td>
		<td><table cellpadding="4" border="0em"><tr><td>border="3em"</td></tr></table></td>
	</tr>
	<tr>
		<th>10</th>
		<td><table cellpadding="4" border="0foo"><tr><td>border="10"</td></tr></table></td>
		<td><table cellpadding="4" border="0foo"><tr><td>border="10px"</td></tr></table></td>
		<td><table cellpadding="4" border="0foo"><tr><td>border="10em"</td></tr></table></td>
	</tr>
</table>

<script>

var tables = document.getElementsByTagName("table");
var values = [ null, "0", "0px", "0em", "1", "1px", "1em",
               "2", "2px", "2em", "3", "3px", "3em", "10", "10px", "10em" ];
if (tables.length == values.length) {
  for (var i in values) {
    var table = tables[i];
    var value = values[i];
    if (value != null) {
      // flush
      getComputedStyle(table.firstChild.firstChild.firstChild, "").borderWidth;

      table.setAttribute("border", value);
    }
  }
}

</script>

</body>
</html>
